<template>
  <div class="min-h-screen bg-white  transition-colors duration-300">
    <!-- Hero Section -->
    <section class="relative overflow-hidden bg-white  transition-colors duration-300">
      <!-- Animated background elements -->
      <div class="absolute inset-0">
        <!-- Main gradient orbs -->
        <div class="absolute top-1/4 right-1/4 w-96 h-96 bg-gradient-to-br from-blue-400/30 to-purple-500/30 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute bottom-1/4 left-1/4 w-80 h-80 bg-gradient-to-tr from-purple-400/25 to-pink-400/25 rounded-full blur-3xl animate-pulse delay-1000"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-gradient-to-r from-cyan-400/20 to-blue-400/20 rounded-full blur-2xl animate-pulse delay-500"></div>
        
        <!-- Floating particles -->
        <div class="absolute top-20 left-20 w-2 h-2 bg-blue-400/40 rounded-full animate-bounce delay-300"></div>
        <div class="absolute top-40 right-32 w-1 h-1 bg-purple-400/50 rounded-full animate-bounce delay-700"></div>
        <div class="absolute bottom-32 left-40 w-1.5 h-1.5 bg-cyan-400/40 rounded-full animate-bounce delay-1000"></div>
        <div class="absolute bottom-20 right-20 w-2 h-2 bg-pink-400/30 rounded-full animate-bounce delay-500"></div>
        
        <!-- Random floating bubbles -->
        <div class="absolute top-16 left-1/4 w-1 h-1 bg-blue-300/60 rounded-full animate-pulse delay-200"></div>
        <div class="absolute top-32 right-1/3 w-1.5 h-1.5 bg-purple-300/50 rounded-full animate-pulse delay-800"></div>
        <div class="absolute top-1/3 left-16 w-1 h-1 bg-cyan-300/70 rounded-full animate-pulse delay-1200"></div>
        <div class="absolute top-2/3 right-16 w-1.5 h-1.5 bg-pink-300/40 rounded-full animate-pulse delay-400"></div>
        <div class="absolute bottom-1/3 left-1/3 w-1 h-1 bg-indigo-300/60 rounded-full animate-pulse delay-900"></div>
        <div class="absolute top-1/2 right-1/4 w-1.5 h-1.5 bg-violet-300/50 rounded-full animate-pulse delay-600"></div>
        <div class="absolute bottom-16 left-1/2 w-1 h-1 bg-sky-300/70 rounded-full animate-pulse delay-1100"></div>
        <div class="absolute top-3/4 right-1/2 w-1.5 h-1.5 bg-rose-300/40 rounded-full animate-pulse delay-300"></div>
        <div class="absolute top-1/4 left-2/3 w-1 h-1 bg-emerald-300/60 rounded-full animate-pulse delay-700"></div>
        <div class="absolute bottom-1/4 right-2/3 w-1.5 h-1.5 bg-amber-300/50 rounded-full animate-pulse delay-1000"></div>
        <div class="absolute top-5/6 left-1/6 w-1 h-1 bg-teal-300/70 rounded-full animate-pulse delay-500"></div>
        <div class="absolute bottom-1/6 right-1/6 w-1.5 h-1.5 bg-fuchsia-300/40 rounded-full animate-pulse delay-1300"></div>
      </div>

      <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
        <div class="text-center">
          <!-- Badge -->
          <div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-blue-50 to-purple-50   border border-blue-200/50  mb-8">
            <div class="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
            <span class="text-sm font-bold text-gray-700  tracking-wide">Live Platform • 24/7 AI Automation</span>
          </div>

          <!-- Main heading with enhanced typography -->
          <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold text-gray-900  mb-8 leading-tight">
            <span class="block font-extrabold tracking-tight">AI Agents That</span>
            <span class="block font-extrabold tracking-tight">Work While You</span>
            <span class="relative inline-block">
              <span class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent animate-gradient-x font-black tracking-wider">
                Sleep
              </span>
              <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-full opacity-60"></div>
            </span>
          </h1>
          
          <!-- Enhanced subtitle -->
          <p class="text-xl md:text-2xl lg:text-3xl text-gray-600  mb-4 max-w-5xl mx-auto leading-relaxed font-light">
            Build <span class="font-semibold text-gray-800">passive income streams</span> with AI automation.
          </p>
          <p class="text-lg md:text-xl text-gray-500  mb-12 max-w-4xl mx-auto leading-relaxed">
            Skip the trial and error—get straight to what works. 
            <span class="font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent tracking-wide">
              Your AI workforce never stops.
            </span>
          </p>

          <!-- Enhanced CTA Buttons -->
          <div class="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
            <router-link 
              to="/marketplace" 
              class="group relative px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl text-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-xl hover:shadow-2xl transform hover:-translate-y-1"
            >
              <span class="relative z-10 flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                <span class="font-bold tracking-wide">Explore Agents</span>
              </span>
              <div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl blur opacity-30 group-hover:opacity-50 transition-opacity duration-300"></div>
            </router-link>
            
            <router-link 
              to="/create-agent" 
              class="group px-8 py-4 border-2 border-gray-200 text-gray-700 rounded-xl text-lg font-semibold hover:border-gray-300 hover:bg-gray-50 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:-translate-y-1"
            >
              <span class="flex items-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                <span class="font-bold tracking-wide">Create Your Agent</span>
              </span>
            </router-link>
          </div>

          <!-- Enhanced Stats with icons -->
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
            <div class="group text-center p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-blue-200 transition-all duration-300 hover:shadow-lg">
              <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <div class="text-3xl md:text-4xl font-black bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent mb-2 tracking-tight">500+</div>
              <div class="text-gray-600 font-semibold tracking-wide">AI Agents</div>
            </div>
            
            <div class="group text-center p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-purple-200 transition-all duration-300 hover:shadow-lg">
              <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
              </div>
              <div class="text-3xl md:text-4xl font-black bg-gradient-to-r from-purple-600 to-purple-700 bg-clip-text text-transparent mb-2 tracking-tight">10K+</div>
              <div class="text-gray-600 font-semibold tracking-wide">Active Users</div>
            </div>
            
            <div class="group text-center p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-green-200 transition-all duration-300 hover:shadow-lg">
              <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1" />
                </svg>
              </div>
              <div class="text-3xl md:text-4xl font-black bg-gradient-to-r from-green-600 to-green-700 bg-clip-text text-transparent mb-2 tracking-tight">$2M+</div>
              <div class="text-gray-600 font-semibold tracking-wide">Revenue Generated</div>
            </div>
            
            <div class="group text-center p-6 rounded-2xl bg-white/50 backdrop-blur-sm border border-gray-100 hover:border-orange-200 transition-all duration-300 hover:shadow-lg">
              <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <div class="text-3xl md:text-4xl font-black bg-gradient-to-r from-orange-600 to-orange-700 bg-clip-text text-transparent mb-2 tracking-tight">Always On</div>
              <div class="text-gray-600 font-semibold tracking-wide">Automation</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Process Flow Section -->
    <section class="py-20 bg-gradient-to-br from-gray-50 to-blue-50/30   transition-colors duration-300">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <div class="inline-flex items-center px-4 py-2 rounded-full bg-gradient-to-r from-blue-50 to-purple-50   border border-blue-200/50  mb-6">
            <div class="w-2 h-2 bg-blue-500 rounded-full mr-2 animate-pulse"></div>
            <span class="text-sm font-bold text-gray-700  tracking-wide">5-Step Process</span>
          </div>
          <h2 class="text-2xl md:text-3xl font-bold text-gray-900  mb-3">
            <span class="block font-extrabold tracking-tight">AI Agent Teams</span>
            <span class="block bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-black tracking-wide">
              Full Process Automation
            </span>
          </h2>
          <p class="text-base text-gray-600  max-w-xl mx-auto">
            <span class="font-semibold text-gray-800 ">10x efficiency improvement</span> with intelligent collaboration
          </p>
        </div>

        <!-- Process Steps -->
        <div class="relative">
          <!-- Connection Line -->
          <div class="hidden lg:block absolute top-16 left-0 right-0 h-0.5 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 opacity-30"></div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 lg:gap-4">
            <!-- Step 1: Create Company -->
            <div class="relative text-center group">
              <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
              </div>
              <h3 class="font-bold text-gray-900  text-lg mb-2">Create Team</h3>
              <p class="text-sm text-gray-600  leading-relaxed">Register account, start your AI journey</p>
            </div>

            <!-- Step 2: Select Agents -->
            <div class="relative text-center group">
              <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
              </div>
              <h3 class="font-bold text-gray-900  text-lg mb-2">Select Agents</h3>
              <p class="text-sm text-gray-600  leading-relaxed">Choose from 500+ professional AI agents</p>
            </div>

            <!-- Step 3: Assemble Team -->
            <div class="relative text-center group">
              <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
              </div>
              <h3 class="font-bold text-gray-900  text-lg mb-2">Assemble Team</h3>
              <p class="text-sm text-gray-600  leading-relaxed">Combine multiple agents to form a team</p>
            </div>

            <!-- Step 4: Produce Project -->
            <div class="relative text-center group">
              <div class="w-16 h-16 bg-gradient-to-br from-pink-500 to-rose-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                </svg>
              </div>
              <h3 class="font-bold text-gray-900  text-lg mb-2">Produce Project</h3>
              <p class="text-sm text-gray-600  leading-relaxed">AI agents collaborate to produce projects</p>
            </div>

            <!-- Step 5: Deploy Online -->
            <div class="relative text-center group">
              <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-orange-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg group-hover:scale-110 transition-transform duration-300">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </div>
              <h3 class="font-bold text-gray-900  text-lg mb-2">Deploy Online</h3>
              <p class="text-sm text-gray-600  leading-relaxed">One-click deployment to go live</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <div class="py-16">
    <!-- Featured Agents Section -->
    <AgentGridComponent 
      :agents="featuredAgents"
      badge-text="Featured Collection"
      title="Top AI Agents"
      title-highlight="Worth Your Time"
      description="Discover the most popular and effective AI agents that are helping creators build passive income streams and automate their workflows"
      :show-view-all="true"
    />

    </div>

    <!-- Value Proposition Section -->
    <section class="py-16 bg-white  transition-colors duration-300">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <h2 class="text-2xl md:text-3xl font-bold text-gray-900  mb-3">
            Why Choose <span class="font-black bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent tracking-wide">Hustle</span>?
          </h2>
          <p class="text-base text-gray-600  max-w-xl mx-auto">
            Join the AI revolution and turn your expertise into passive income
          </p>
        </div>

        <!-- Top Row - 3 Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
          <!-- Professional AI Agents -->
          <div class="bg-white  rounded-2xl border border-gray-200  p-6 hover:shadow-lg transition-all duration-300">
            <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
              </svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900  mb-2">Professional AI Agents</h3>
            <p class="text-gray-600  mb-4 leading-relaxed text-sm">
              Thousands of professional AI agents created by domain experts, covering technology, design, business and other fields.
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                Professional Certification
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
                </svg>
                AI Driven
              </span>
              <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                Quality Assurance
              </span>
            </div>
          </div>

          <!-- Flexible Pricing -->
          <div class="bg-white  rounded-2xl border border-gray-200  p-6 hover:shadow-lg transition-all duration-300">
            <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00-.95 1.313l5.091 1.515c.922.275 1.287 1.339.646 2.011l-3.293 3.293a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118l-3.293-3.293c-.641-.672-.276-1.736.646-2.011l5.091-1.515a1 1 0 00.95-1.313l-1.52-4.674z" />
              </svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900  mb-2">Flexible Pricing</h3>
            <p class="text-gray-600  mb-4 leading-relaxed text-sm">
              Includes free use, pay-per-use, hourly billing, project-based pricing and other flexible pricing models.
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z" />
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd" />
                </svg>
                Free Trial
              </span>
              <span class="px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
                </svg>
                Pay As You Go
              </span>
              <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                Flexible Choice
              </span>
            </div>
          </div>

          <!-- Passive Income -->
          <div class="bg-white  rounded-2xl border border-gray-200  p-6 hover:shadow-lg transition-all duration-300">
            <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
              </svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900  mb-2">Passive Income</h3>
            <p class="text-gray-600  mb-4 leading-relaxed text-sm">
              Create quality agents to achieve knowledge monetization and passive income, making professional skills generate continuous value.
            </p>
            <div class="flex flex-wrap gap-2">
              <span class="px-3 py-1 bg-purple-50 text-purple-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                Knowledge Monetization
              </span>
              <span class="px-3 py-1 bg-pink-50 text-pink-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                </svg>
                Continuous Earnings
              </span>
              <span class="px-3 py-1 bg-orange-50 text-orange-700 rounded-full text-xs font-medium flex items-center">
                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                </svg>
                Value Creation
              </span>
            </div>
          </div>
        </div>

        <!-- Bottom Row - 2 Larger Cards -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Unlimited Possibilities -->
          <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl border border-green-200 p-6 hover:shadow-lg transition-all duration-300">
            <div class="w-10 h-10 bg-green-600 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900  mb-2">Unlimited Possibilities</h3>
            <p class="text-gray-600  mb-4 leading-relaxed text-sm">
              From content creation to data analysis, from customer service to project management, AI agents unlock unlimited business opportunities for you, turning creativity into reality.
            </p>
            <button class="text-green-600 font-semibold hover:text-green-700 transition-colors duration-200 flex items-center">
              Explore More Possibilities
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </button>
          </div>

          <!-- Global Community -->
          <div class="bg-gradient-to-br from-purple-50 to-violet-50 rounded-2xl border border-purple-200 p-6 hover:shadow-lg transition-all duration-300">
            <div class="w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center mb-4">
              <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
              </svg>
            </div>
            <h3 class="text-lg font-bold text-gray-900  mb-2">Global Community</h3>
            <p class="text-gray-600  mb-4 leading-relaxed text-sm">
              Join a global community of AI entrepreneurs and innovators, share experiences, collaborate for win-win, and explore unlimited business opportunities in the AI era together.
            </p>
            <button class="text-purple-600 font-semibold hover:text-purple-700 transition-colors duration-200 flex items-center">
              Join Community
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Compact CTA Section -->
    <section class="relative py-16 bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900    overflow-hidden">
      <!-- Background Elements -->
      <div class="absolute inset-0">
        <div class="absolute top-0 left-1/4 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-1/4 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
      </div>
      
      <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
          <!-- Badge -->
          <div class="inline-flex items-center px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white text-sm font-medium mb-4">
            <svg class="w-3 h-3 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
            </svg>
            <span class="font-bold tracking-wide">Start Your Journey Today</span>
          </div>
          
          <!-- Main Heading -->
          <h2 class="text-3xl md:text-5xl font-bold text-white  mb-4 leading-tight">
            <span class="block font-extrabold tracking-tight">Transform Ideas Into</span>
            <span class="block bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent font-black tracking-wider">
              Revenue Streams
            </span>
          </h2>
          
          <!-- Subtitle -->
          <p class="text-lg text-gray-300  mb-8 max-w-2xl mx-auto">
            Turn your expertise into automated income. Launch your first AI agent in under 5 minutes.
          </p>
        </div>
        
        <!-- Action Cards -->
        <div class="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto mb-8">
          <!-- Create Agent Card -->
          <div class="group relative p-6 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all duration-300 hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative">
              <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-white  mb-3">Create Your Agent</h3>
              <p class="text-gray-300  mb-4 text-sm leading-relaxed">
                Build custom AI agents tailored to your business. No technical skills needed.
              </p>
              <router-link 
                to="/signup" 
                class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 text-sm"
              >
                <span class="font-bold tracking-wide">Start Creating</span>
                <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </router-link>
            </div>
          </div>
          
          <!-- Discover Solutions Card -->
          <div class="group relative p-6 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all duration-300 hover:scale-105">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            <div class="relative">
              <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
              </div>
              <h3 class="text-xl font-bold text-white  mb-3">Discover Solutions</h3>
              <p class="text-gray-300  mb-4 text-sm leading-relaxed">
                Explore proven AI solutions. Find ready-made agents for your industry.
              </p>
              <router-link 
                to="/marketplace" 
                class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-600 to-purple-700 text-white font-semibold rounded-lg hover:from-purple-700 hover:to-purple-800 transition-all duration-200 text-sm"
              >
                <span class="font-bold tracking-wide">Explore Now</span>
                <svg class="w-4 h-4 ml-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                </svg>
              </router-link>
            </div>
          </div>
        </div>
        
        <!-- Trust Indicators -->
        <div class="text-center">
          <div class="flex flex-wrap justify-center items-center gap-6 opacity-70">
            <div class="flex items-center space-x-1.5">
              <div class="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
              <span class="text-white text-xs">Zero Setup Fee</span>
            </div>
            <div class="flex items-center space-x-1.5">
              <div class="w-1.5 h-1.5 bg-blue-400 rounded-full"></div>
              <span class="text-white text-xs">Instant Launch</span>
            </div>
            <div class="flex items-center space-x-1.5">
              <div class="w-1.5 h-1.5 bg-purple-400 rounded-full"></div>
              <span class="text-white text-xs">Global Reach</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue'
  import { useAgentsStore } from '../stores/agents'
  import SearchFilterComponent from '../components/common/SearchFilterComponent.vue'
  import AgentGridComponent from '../components/common/AgentGridComponent.vue'

  const agentsStore = useAgentsStore()

  // State
  const searchQuery = ref('')
  const selectedCategories = ref<string[]>([])
  const selectedPricing = ref('')

  // Computed
  const featuredAgents = computed(() => agentsStore.featuredAgents)

  // Lifecycle
  onMounted(() => {
    agentsStore.fetchAgents()
  })
</script>

<style scoped>
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Custom animations */
  @keyframes gradient-x {

    0%,
    100% {
      background-size: 200% 200%;
      background-position: left center;
    }

    50% {
      background-size: 200% 200%;
      background-position: right center;
    }
  }

  .animate-gradient-x {
    animation: gradient-x 3s ease infinite;
  }

  /* Enhanced hover effects */
  .group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
  }

  /* Smooth transitions for all interactive elements */
  * {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  /* Custom scrollbar for webkit browsers */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #7c3aed);
  }
</style>
